<template>
    <div class="Area">
        <div class="control">
            <p>收货地址</p>
            <input type="text" placeholder="省/市/区" v-model="region" maxlength="80" readonly="readonly" @click="showAddressPicker" />
        </div>
        <!-- 省市区地址选择 -->
        <mt-popup v-model="regionVisible" position="bottom">
            <mt-button type="default" @click="show">取消</mt-button>
            <mt-button type="primary" @click="show">确定</mt-button>
            <mt-picker :slots="myAddressSlots" valueKey="name" :visibleItemCount="5" @change="addressChange" :itemHeight="40"></mt-picker>
        </mt-popup>
        <p>详细地址</p>
        <input type="text" placeholder="（如门牌号等）" v-model="msg">
    </div>
</template>

<script>
    import addrlist from '@/assets/address/threeLevelAddress.json'
    export default {
        name: "Area",
        data () {
            return {
                regionVisible: false, // 弹出框默认是否可见
                msg:'',
                region: '',
                // picker组件插槽
                myAddressSlots: [
                    // 省
                    {
                        flex: 1,
                        values: this.getProvinceArr(), // ['广东'], // 省份数组
                        className: 'slot1',
                        textAlign: 'left'
                    },
                    // 分隔符
                    {
                        divider: true,
                        content: '',
                        className: 'slot2'
                    },
                    // 市
                    {
                        flex: 1,
                        values: this.getCityArr("440000"), // []
                        className: 'slot3',
                        textAlign: 'left'
                    },
                    {
                        divider: true,
                        content: '',
                        className: 'slot4'
                    },
                    // 县
                    {
                        flex: 1,
                        values: this.getCountyArr("440500"), // []
                        className: 'slot5',
                        textAlign: 'left'
                    }
                ]
            }
        },
        methods: {
            show(){
                this.regionVisible = false;
            },
            showAddressPicker () {
                this.regionVisible = true;
            },
            addressChange (picker, values) {
                let provicename = values[0]['name'] ? values[0]['name'] : '';
                let cityname = values[1]['name'] ? values[1]['name'] : '';
                let areaname = values[2]['name'] ? values[2]['name'] : '';
                this.region = provicename + '-' + cityname + '-' + areaname;

                // 给市、县赋值
                picker.setSlotValues(1, this.getCityArr(values[0]["code"]));
                picker.setSlotValues(2, this.getCountyArr(values[1]["code"]));
            },
            getProvinceArr () {
                let gp = addrlist.province;
                return gp;
            },
            getCityArr (code) {
                let p = addrlist.city[code];
                let cityname = p.map(item => item.name);
                // console.log(p);
                return p;
            },
            getCountyArr (code) {
                let s = addrlist.area[code];
                if (s) {
                    let countyname = s.map(item => item.name);
                }
                // console.table(code, s);
                return s;
            }
        },

    }
</script>

<style scoped lang="less">
    @baseFontSize:20px;
    @baseSize:20;
    html{
        font-size: @baseFontSize;
    }
    .px2rem(@name,@px){
            @{name}:@px / 2 / @baseSize * 1rem;
    }

    *{
        margin: 0;
        padding: 0;
        text-decoration: none;
        list-style: none;
    }
    .Area{
        p{
            .px2rem(margin-top,20);
            .px2rem(font-size,30);
            .px2rem(padding-left,20);
        }
        input{
            .px2rem(width,750);
            .px2rem(height,80);
            border: none;
            outline: none;
            border-bottom: 1px solid gray;
            .px2rem(padding-left,40);
            .px2rem(margin-top,20);
        }
        .mint-button--default{
            .px2rem(margin-top,20);
            .px2rem(margin-left,20);
        }
        .mint-button--primary{
            .px2rem(margin-top,20);
            float: right;
            .px2rem(margin-right,20);
        }
    }
</style>